<template>

<div>
  <div class="bon">
    <p>工作台</p>
    <h1>您好！{{user}}</h1>
    <p>您的角色:</p>
</div>
   <div style="width:100vw;height:100vh;margin: 0 auto;">
     

  <div style="width:1240px;height:400px;background:#fff;margin: 20px 25px;">
  <div style="width:1240px;height:60px;border-bottom: solid 1px #ccc;">
  <p style="padding: 20px;">面板导航</p>
  </div>
    <div class="main" style="width:1200px;height:320px;margin-top: 20px;"></div>
  </div>
<div style="width:1240px;height:180px;background: #fff;margin: 20px 25px;">
    <div style="width:1240px;height:60px;border-bottom: solid 1px #ccc;">
  <p style="padding: 20px;">面板导航</p>
  </div>
 <div class="con">
   <span @click="$router.push('/layout/list')">文章管理</span>
   <span @click="$router.push('/layout/for')">评论管理</span>
   <span @click="$router.push('/layout/green')">文件管理</span>
   <span @click="$router.push('/layout/pop')">用户管理</span>
   <span @click="$router.push('/layout/pop')">访问管理</span>

   <span @click="$router.push('/layout/book')">系统设置</span>


 </div>
</div>
  </div>
</div>
 
</template>

<script lang="ts">
import { defineComponent, onMounted ,ref} from "vue";
import {NameA} from '../../api'
import * as echarts from 'echarts';
export default defineComponent({

  setup(){

 const user:any=ref('')



    onMounted(()=>{
const myChart = echarts.init(document.querySelector('.main') as HTMLElement);
const categories = (function () {
  let now = new Date();
  let res = [];
  let len = 10;
  while (len--) {
    res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
    now = new Date(+now - 2000);
  }
  return res;
})();
const categories2 = (function () {
  let res = [];
  let len = 10;
  while (len--) {
    res.push(10 - len - 1);
  }
  return res;
})();
const data: number[] = (function () {
  let res = [];
  let len = 10;
  while (len--) {
    res.push(Math.round(Math.random() * 1000));
  }
  return res;
})();
const data2: number[] = (function () {
  let res = [];
  let len = 0;
  while (len < 10) {
    res.push(+(Math.random() * 10 + 5).toFixed(1));
    len++;
  }
  return res;
})();

myChart.setOption ({
  title: {
    text: 'Dynamic Data'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#283b56'
      }
    }
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  dataZoom: {
    show: false,
    start: 0,
    end: 100
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      data: categories
    },
    {
      type: 'category',
      boundaryGap: true,
      data: categories2
    }
  ],
  yAxis: [
    {
      type: 'value',
      scale: true,
      name: 'Price',
      max: 30,
      min: 0,
      boundaryGap: [0.2, 0.2]
    },
    {
      type: 'value',
      scale: true,
      name: 'Order',
      max: 1200,
      min: 0,
      boundaryGap: [0.2, 0.2]
    }
  ],
  series: [
    {
      name: 'Dynamic Bar',
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: data
    },
    {
      name: 'Dynamic Line',
      type: 'line',
      data: data2
    }
  ]
});

//  app.count = 11;
// setInterval(function () {
//   let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');

//   data.shift();
//   data.push(Math.round(Math.random() * 1000));
//   data2.shift();
//   data2.push(+(Math.random() * 10 + 5).toFixed(1));

//   categories.shift();
//   categories.push(axisData);
//   categories2.shift();
//   // categories2.push(app.count++);

//   myChart.setOption<echarts.EChartsOption>({
//     xAxis: [
//       {
//         data: categories
//       },
//       {
//         data: categories2
//       }
//     ],
//     series: [
//       {
//         data: data
//       },
//       {
//         data: data2
//       }
//     ]
//   });
// }, 2100);

const token=localStorage.getItem('token')
     console.log(token)
NameA({token}).then(res=>{
  console.log(res.data.user.user)
   user.value=res.data.user.user
})


    });
    return {
      user
    }
  }
})
</script>

<style lang='scss'>
.con{

  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 120px;
}

.bon{
  width: 100vw;
  height: 130px;
  background: #fff;
  z-index: 9999;
  padding-left: 50px;
 
 h1{
   font-size: 30px;
   font-weight: bold;
 }
}
</style>